<template>
  <div class="star-storeList flex-col items-center">
    <!-- <div class="item bg-white flex-col" v-for="(item, index) in storeList" :key="`store${index}`">
      <div class="store-name flex-row items-center">
        <span class="name">
          {{item.storeName}}
        </span>
        <span class="tag">{{item.storeLabel.split(";")[0]}}</span>
        <span class="go">进店看看</span>
      </div>
      <div class="content flex-row justify-between">
        <div class="goods flex-col bg-white" v-for="(goods, index) in item.goodsInfoDTOList" :key="`goods${index}`" @tap="$goGoodsDeail({ id: goods.id })">
          <div class="top justify-center">
            <img :src="goods.coverUrl" alt="" class="img" mode="scaleToFill" >
          </div>
          <div class="bottom flex-col">
            <div class="title ellipsis_1">{{goods.name}}</div>
            <div class="text">
              套餐：i5-8G-240G-集显
            </div>
            <div class="price flex-row">
              <div class="now-price flex-row items-baseline">
                <span class="tag">￥</span>
                <span class="num">{{goods.minimumRentPrice}}/天</span>
              </div>
              <div class="old-price">
                ¥{{goods.minimumRentPrice | getOldPrice}}/天
              </div>
            </div>
            <div class="btns flex-row">
              <img src="../../../assets/common/star-1.png" alt="" class="btn">
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="item items-center bg-white" v-for="(item, index) in storeList" :key="`store${index}`" @tap="$goStore(item.id)">
      <div class="left">
        <img :src="item.storeLogo | changeUrl" alt="" class="img" mode="aspectFit">
      </div>
      <div class="center flex-col">
        <span class="name">{{item.storeName}}</span>
        <span class="company">{{item.companyName}}</span>
      </div>
      <div class="right">
        {{item.cityName}} | 访客量： {{item.virtualSalesVolume | changeSales}}
      </div>
    </div>
    <NoData v-if="storeList.length === 0"/>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        storeList: [],
        data: {
          page: 1,
          size: 10,
          finish: false
        },
      }
    },
    mounted() {
      this.getData()
    },
    filters: {
      changeSales(sales) {
        return sales > 99999 ? '99999+' : (sales || 0)
      }
    },
    methods: {
      getData() {
        const params = {
          type: 2,
          pageNumber: this.data.page,
          pageSize: this.data.size
        }
        this.$http.request({
          url: '/user/myCollectionList.json',
          data: params
        }).then(({ data: { storeGoodsDTOList } }) => {
          this.$taro.stopPullDownRefresh()
          this.storeList.push(...storeGoodsDTOList)
          if (storeGoodsDTOList.length < this.data.size) {
            this.data.finish = true
          } else {
            this.data.finish = false
          }
        })
      },
      resetData() {
        this.data.page = 1
        this.data.finish = false
        this.$taro.pageScrollTo({ scrollTop: 0 })
        this.getData()
      },
      getMoreData() {
        if (this.data.finish) {
          return
        }
        this.data.page += 1
        this.getData()
      }
    }
  }
</script>
<style lang="scss">
  .star-storeList {
    width: 100%;
    // .item {
    //   margin-top: 10px;
    //   width: 375px;
    //   height: 307px;
    //   padding: 0 7px 15px;
    //   .store-name {
    //     height: 47px;
    //     .name {
    //       font-size: 16px;
    //       font-family: PingFang SC;
    //       font-weight: bold;
    //       color: #232323;
    //       margin-left: 11px;
    //     }
    //     .tag {
    //       margin-left: 9px;
    //       padding: 0 7px;
    //       height: 19px;
    //       background: #FFD800;
    //       text-align: center;
    //       line-height: 19px;
    //       font-size: 13px;
    //       font-family: PingFang SC;
    //       font-weight: 400;
    //       color: #876500;
    //     }
    //     .go {
    //       margin-left: auto;
    //       margin-right: 10px;
    //       font-size: 15px;
    //       font-family: PingFang SC;
    //       font-weight: 400;
    //       color: #A1A1A1;
    //     }
    //   }
    //   .content {
    //     .goods {
    //       width: 179px;
    //       height: 245px;
    //       box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.16);
    //       .top {
    //         margin-top: 17px;
    //         height: 101px;
    //         .img {
    //           width: 101px;
    //           height: 101px;
    //         }
    //       }
    //       .bottom {
    //         margin-top: 8px;
    //         padding: 0 10px;
    //         .title {
    //           font-size: 13px;
    //           font-family: PingFang SC;
    //           font-weight: 400;
    //           color: #232323;
    //         }
    //         .text {
    //           font-size: 10px;
    //           font-family: PingFang SC;
    //           font-weight: 400;
    //           color: #9E9E9E;
    //           margin-top: 7px;
    //           height: 14px;
    //         }
    //         .price {
    //           margin-top: 7px;
    //           .now-price {
    //             font-size: 18px;
    //             font-family: PingFang SC;
    //             font-weight: bold;
    //             color: #E02732;
    //             .tag {
    //               font-size: 12px;
    //             }
    //           }
    //           .old-price {
    //             margin-left: auto;
    //             font-size: 13px;
    //             font-family: PingFang SC;
    //             font-weight: 400;
    //             color: #9D9D9D;
    //           }
    //         }
    //         .btns {
    //           margin-top: 6px;
    //           .btn {
    //             width: 76px;
    //             height: 25px;
    //           }
    //           .btn2 {
    //             margin-left: 7px;
    //           }
    //         }
    //       }
    //     }
    //   }
    // }
    .item {
      width: 375px;
      height: 72px;
      padding: 0 14px;
      border-sizing: border-box;
      margin-top: 8px;
      .left {
        .img {
          width: 44px;
          height: 44px;
          border-radius: 50%;
        }
      }
      .center {
        margin-left: 10px;
        .name {
          color: #000000;
          font-weight: bold;
          font-size: 16px;
        }
        .company {
          color: #555;
          font-size: 14px;
          margin-top: 2px;
        }
      }
      .right {
        color: #AAAAAA;
        font-size: 10px;
        margin-left: auto;
      }
    }
  }
</style>
